import { globalModel } from '@/models/globalModel'
import { getMpList, MpVO } from '@/services/MpService'
import { useEmotionCss } from '@ant-design/use-emotion-css'
import { Avatar, Button, Divider, List, Popover } from 'antd'
import { observer } from 'mobx-react-lite'
import { useEffect } from 'react'
import styled from 'styled-components'

const ActionItem = styled.div`
  justify-content: center;
  align-items: center;
  display: flex;
  float: right;
  height: 48px;
  margin-left: auto;
  overflow: hidden;
  cursor: pointer;
  padding: 0 12px;
  line-height: 48px;
  border-radius: 2px;

  &:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }
`

const MpListItem = styled(List.Item)`
  cursor: pointer;
  border-radius: 2px;
  padding: 10px !important;
  justify-content: center;

  &:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }
`
const MpList = observer(() => (
  <>
    <List
      dataSource={globalModel.mpMenuList}
      renderItem={(item: MpVO) => (
        <MpListItem
          onClick={() => {
            globalModel.setDefaultMp(item)
            window.location.reload()
          }}
        >
          {item.nickName}
        </MpListItem>
      )}
    />
    <Divider style={{ margin: '2px 0' }} />
    <Button type="link">授权新的公众号</Button>
  </>
))

const MpSwitch = () => {
  const avatarClassName = useEmotionCss(({ token }) => {
    return {
      marginRight: '8px',
      // color: token.colorPrimary,
      verticalAlign: 'top',
      // background: setAlpha(token.colorBgContainer, 0.85),
      [`@media only screen and (max-width: ${token.screenMD}px)`]: {
        margin: 0,
      },
    }
  })
  useEffect(() => {
    getMpList().then((value) => {
      globalModel.setMpList(value)
    })
  }, [])
  return (
    <>
      <Popover content={<MpList />}>
        <ActionItem>
          <Avatar className={avatarClassName} src={globalModel.defaultMp?.headImg} />
          <span>{globalModel.isHasMp ? globalModel.defaultMp?.nickName : '未授权公众号'}</span>
        </ActionItem>
      </Popover>
      {/*<Dropdown*/}
      {/*  menu={{*/}
      {/*    items: globalModel.mpMenuList,*/}
      {/*    selectable: true,*/}
      {/*  }}*/}
      {/*  dropdownRender={(originNode) => <>*/}
      {/*  </>}*/}
      {/*>*/}
      {/*  <ActionItem>*/}
      {/*    <Avatar className={avatarClassName} src={globalModel.marketingMp?.headImg} />*/}
      {/*    <span>{globalModel.marketingMp?.nickName}</span>*/}
      {/*  </ActionItem>*/}
      {/*</Dropdown>*/}
    </>
  )
}

export default observer(MpSwitch)
